<template>
  <div class="home">
    <h1>商品列表</h1>
    <div class="products">
      <div v-for="product in products" :key="product.id" class="product">
        <h3>{{ product.name }}</h3>
        <p>价格: ￥{{ product.price }}</p>
        <button @click="addToCart(product)">加入购物车</button>
      </div>
    </div>
    <Cart />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import Cart from '@/components/Cart.vue'

export default {
  name: 'HomeView',
  components: {
    Cart
  },
  computed: {
    ...mapState(['products'])
  },
  methods: {
    ...mapActions(['addToCart'])
  }
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.products {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* 添加这行使商品列表居中 */
  max-width: 1200px; /* 可选：限制最大宽度 */
  margin: 0 auto; /* 可选：水平居中 */
}

.product {
  border: 1px solid #ccc;
  padding: 15px;
  width: 200px;
  text-align: center; /* 使商品内容居中 */
}

button {
  margin-top: 10px;
  padding: 5px 10px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #3aa876;
}
</style>